<template>
	<view>

		<NavBar v-if="isstatus == false" text='电子处方' />
		<u-navbar v-else leftText="用药信息" :safeAreaInsetTop="false" :autoBack='true'>
			<!-- 	<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="20"></u-icon>
			</view> -->
		</u-navbar>

		<view v-if="isstatus" style="width: 100%; height: 85rpx;"></view>
		<view v-else style="width: 100%; height: 63px;"></view>
		<view style="width: 100%; background-color: #fff;">
			<view class="flx flxAlign" style="width: 70%; margin:0 auto; height: 100rpx;" v-if="isstatus == false">
				<view :class="{textstyle:true, selsect:Iselsect == 0}" @click="Iselsect = 0">用药处方</view>
				<view :class="{textstyle:true, selsect:Iselsect == 1}" @click="Iselsect = 1">检查申请</view>
				<view :class="{textstyle:true, selsect:Iselsect == 2}" @click="Iselsect = 2">检验申请</view>
			</view>
		</view>

		<view v-if="Iselsect == 0" style="background-color: #fff;">
			<view>
				<view style="border-top: 2rpx solid #cecece;
				padding: 10rpx;">
					<view class="flx1" style="width: 90%; margin:0 auto;">
						<view class="flxAlign">
							<view style="width: 200rpx; height: 150rpx;">
								<image style="width: 100%; height: 100%;" src="/static/images/huanglian.png"></image>
							</view>
						</view>
						<view style="margin-left: 30rpx;">
							<view class="luohuo">络活喜 苯横酸氨氯地平片</view>
							<view class="luohuo">5mg*7片/盒</view>
							<view class="luohuo">辉瑞制药有限公司</view>
						</view>
					</view>
					<view style="width: 90%; height: 50rpx; margin:0 auto;"></view>
				</view>
			</view>
			<!--  -->
			<view>
				<view
					style="width: 90%; margin:0 auto; border-top: 2rpx solid #cecece; border-bottom: 2rpx solid #cecece;">
					<view style="width: 100%; height: 30rpx;"></view>
					<view class="flx">
						<view>
							<view style="font-size: 25rpx; color: #333;">开药数量</view>
							<view style="font-size: 25rpx; color: #a5a5a5; margin-top:20rpx;">开药量不能超过3个月</view>
						</view>
						<view class="flxAlign">
							<u-number-box v-model="value">
								<view slot="minus" class="plus">
									<u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 50px;text-align: center;"
									class="input">{{value}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
					<view style="width: 100%; height: 30rpx;"></view>
				</view>

			</view>
			<!--  -->
			<view>

				<view style="width: 90%; margin:0 auto; margin-top:40rpx;">
					<view style="font-size: 30rpx; font-weight: 600;">当前用法用量</view>
					<view class="flx" style="margin-top: 40rpx;">
						<view style="font-size: 30rpx;">用药频率</view>
						<view class="flx1">
							<view>
								<input style="text-align: right; font-size: 30rpx;" v-model="pl"
									placeholder="请选择用药频率" />
							</view>
							<view class="flxAlign">
								<u-icon name='arrow-right' size="35rpx"></u-icon>
							</view>
						</view>
					</view>
					<view class="flx" style="margin-top: 40rpx;">
						<view style="font-size: 30rpx;">单次用量</view>
						<view class="flx1">
							<view><input style="text-align: right; font-size: 30rpx;" v-model="pls"
									placeholder="输入数量     片/次" /></view>
							<view class="flxAlign">
								<u-icon name='arrow-right' size="35rpx"></u-icon>
							</view>
						</view>
					</view>
					<view class="flx" style="margin-top: 40rpx;">
						<view style="font-size: 30rpx;">用药方法</view>
						<view class="flx1">
							<view><input style="text-align: right; font-size: 30rpx;" v-model="plfa"
									placeholder="请选择" /></view>
							<view class="flxAlign">
								<u-icon name='arrow-right' size="35rpx"></u-icon>
							</view>
						</view>
					</view>
					<view class="flx" style="margin-top: 40rpx;">
						<view style="font-size: 30rpx;">用药天数</view>
						<view class="flx1">
							<view><input style="text-align: right; font-size: 30rpx;" v-model="plts"
									placeholder="请输入天数" /></view>
							<!-- <view class="flxAlign">
								<u-icon name='arrow-right' size="35rpx"></u-icon>
							</view> -->
						</view>
					</view>

					<view style="font-size: 30rpx; margin-top:40rpx;">补充说明<span style="color: #a5a5a5;">（选填）</span>
					</view>
					<view>
						<textarea style="height: 500rpx; width: 100%; margin-top: 40rpx;" v-model="text"
							placeholder="请输入"></textarea>
					</view>
				</view>
			</view>
			<view @click="quer"
				style="width: 90%; background-color: #0079fe; color: #fff; font-size: 25rpx; text-align: center; height: 80rpx; line-height: 80rpx; margin-left: 5%;">
				确定
			</view>
		</view>
		<view v-if="Iselsect == 1">
			<view style="width: 100%; background-color: #fff; height: 80rpx;">
				<view class="flx" style="width: 90%; margin:0 auto; height: 80rpx;">
					<view style="line-height: 50rpx; line-height: 80rpx;">检查项目</view>
					<view class="flx1">
						<view style="font-size: 25rpx; line-height: 50rpx; line-height: 80rpx; color: #a5a5a5;">请选择
						</view>
						<view class="flxAlign" style="margin-left: 20rpx;">
							<u-icon name="arrow-right" size="30rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view
				style="border: #cecece solid 1rpx; width: 99.5%; margin:0 auto; margin-top: 40rpx; background-color: #fff;">
				<view style="width: 90%; margin:0 auto;">
					<view style="line-height: 80rpx; border-bottom: 1rpx solid #cecece;">费用信息</view>
					<view>
						<view class="flx">
							<view style="line-height: 70rpx;">*****</view>
							<view style="line-height: 70rpx; font-size: 25rpx;">￥<span>1.5</span>元</view>
						</view>
						<view class="flx">
							<view style="line-height: 70rpx;">*****</view>
							<view style="line-height: 70rpx; font-size: 25rpx;">￥<span>1.5</span>元</view>
						</view>
					</view>
					<view style="width: 100%; height: 20rpx;"></view>
				</view>

			</view>
			<view
				style="width: 90%; margin:0 auto; height: 80rpx; background-color: #ff9900; border-radius: 40rpx; margin:0 auto; text-align: center; color: #fff; line-height: 80rpx; margin-top:40rpx;">
				确定</view>
		</view>
		<view v-if="Iselsect == 2">
			<view style="width: 100%; background-color: #fff; height: 80rpx;">
				<view class="flx" style="width: 90%; margin:0 auto; height: 80rpx;">
					<view style="line-height: 50rpx; line-height: 80rpx;">检验项目</view>
					<view class="flx1">
						<view style="font-size: 25rpx; line-height: 50rpx; line-height: 80rpx; color: #a5a5a5;">请选择
						</view>
						<view class="flxAlign" style="margin-left: 20rpx;">
							<u-icon name="arrow-right" size="30rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view
				style="border: #cecece solid 1rpx; width: 99.5%; margin:0 auto; margin-top: 40rpx; background-color: #fff;">
				<view style="width: 90%; margin:0 auto;">
					<view style="line-height: 80rpx; border-bottom: 1rpx solid #cecece;">费用信息</view>
					<view>
						<view class="flx">
							<view style="line-height: 70rpx;">*****</view>
							<view style="line-height: 70rpx; font-size: 25rpx;">￥<span>1.5</span>元</view>
						</view>
						<view class="flx">
							<view style="line-height: 70rpx;">*****</view>
							<view style="line-height: 70rpx; font-size: 25rpx;">￥<span>1.5</span>元</view>
						</view>
					</view>
					<view style="width: 100%; height: 20rpx;"></view>
				</view>

			</view>
			<view
				style="width: 90%; margin:0 auto; height: 80rpx; background-color: #ff9900; border-radius: 40rpx; margin:0 auto; text-align: center; color: #fff; line-height: 80rpx; margin-top:40rpx;">
				确定</view>
		</view>

	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				Iselsect: 0,
				isstatus: true,
				value: 1,
				pl: '',
				text: '',
				pls: '',
				plfa: '',
				plts: '',

			}
		},
		onLoad(e) {
			if (e.status == 1) {
				this.isstatus = false
			}
		},
		methods: {
			quer() {
				let object = {
					number: this.value,
					name: '络活喜 苯横酸氨氯地平片',
					text: '5mg*7片/盒',
					gsname: '辉瑞制药有限公司'
				}
				uni.navigateTo({
					url: '/pages/OnlineConsultation/yyqd?object=' + JSON.stringify(object)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #cecece;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.luohuo {
		font-size: 25rpx;
		line-height: 50rpx;
	}

	.textstyle {
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		color: #333;
		width: 130rpx;
		padding: 10rpx;
	}

	.selsect {
		width: 130rpx;
		padding: 10rpx;
		border-radius: 30rpx;
		background-color: #169bd5;
		color: #fff;
	}
</style>